<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
        <style>
            li{
                list-style: none;
            }

            #rs{
                background-color: #eeeeee;
                width: 283px;
                max-height: 81px;
                border: 6px solid #cccccc;
                border-top: 0px;
                padding: 0px 3px;
                position: relative;
                top: -1px;
                box-shadow: 5px 5px 10px;
                overflow: auto;
                display: none;
            }


        </style>
        <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
        <script>


            $(function(){

                $("#key").keyup(function(){
                    var key=$(this).val();
                    var rs=$("#rs");

                    if(""==key){
                        rs.hide();
                        return;
                    }


                    rs.empty();

                    $.getJSON("${pageContext.request.contextPath}/query",
                              "key="+key,
                              function(dataList){

                                  if(dataList.length==0){
                                      rs.hide();
                                      return;
                                  }

                                  rs.show();


                                  $(dataList).each(function(index,data){
                                      var l="<li>"+data.message+"</li>";

                                      var $l=$(l);

                                      $l.mouseover(function(){
                                          $(this).css("backgroundColor","#ffee99");
                                      });

                                      $l.mouseout(function(){
                                          $(this).css("backgroundColor","#eeeeee");
                                      });

                                      $l.click(function(){
                                          $("#key").val($(this).text());
                                          rs.empty();
                                          rs.hide();
                                      });

                                      rs.append($l);
                                  });


                              });


                });

            });








        </script>

    </head>
    <body>
        <input  id="key" type="text" name="key" style="width: 301px;" autocomplete="off"/>
        <div id="rs">
        </div>
    </body>
</html>
